import React, { useCallback, useEffect, useState } from 'react'

// antd
import { Row, Col, Timeline, Card, Form, Input, Button, Select, Space, Table, Popconfirm, message } from 'antd';
const { Meta } = Card
const { Option } = Select

// axios
import { deleteRecord, getRecordData, queryRecordData } from '../../api/records';

// comment
import moment from 'moment'

// css
import '../../style/record.less'

export default function Record() {

  const [form] = Form.useForm()

  // 记录数据
  const [recordData, setRecordData] = useState([])

  // 自定义表格的配置
  const columns = [

    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '内容',
      dataIndex: 'context',
      key: 'context',
    },
    {
      title: '操作人',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '时间',
      dataIndex: 'date',
      key: 'date',
      render: (text) => (
        <>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</>
      ),
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: (text) => (
        <>
          <Popconfirm
            title="确认要删除这条记录吗？"
            onConfirm={confirm.bind(null, text)}
            onCancel={cancel.bind(null, text)}
            okText="是"
            cancelText="否"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </>
      ),
    },
  ];

  // 当前页数
  const [_page, setPage] = useState(1)

  // 每页大小
  const [_limit, setLimit] = useState(5)

  // 分页总数
  const [total, setTotal] = useState(0)

  // 查询事件范围计数
  const [date_gte, setDate_Gte] = useState(undefined)

  // 查询事件关键词
  const [q, setQ] = useState(undefined)

  // 一天时间的计数
  const [oneDay, setOneDay] = useState((1000 * 60 * 60 * 24))

  // 挂载后更新数据
  useEffect(() => {
    const getRecord = async() => {
      const res = await getRecordData()
      // 设置数据并倒序
      setRecordData(res)
    }
    getRecord()

    queryTotal({date_gte, q})
  }, [])

  // 查询按钮
  const onFinish = useCallback((values) => {
    // 获取当前时间毫秒
    const nowTime = new Date().getTime()
    // 计算时间差值
    const date = nowTime - (values.selectDate * oneDay)
    // 保存记录
    setDate_Gte(date)
    setQ(values.keywords)
    // 发送axios请求
    query({
      date_gte: date,
      q: values.keywords,
      _page,
      _limit})
  }, [])

  // 查询综合版
  const query = useCallback(async({date_gte, q,  _page, _limit}) => {
    // 发送请求
    const res = await queryRecordData({date_gte, q,  _page, _limit})
    // 修改记录数据
    setRecordData(res)
    //
    queryTotal({date_gte, q})
  }, [])

  // 查询对应内容总数
  const queryTotal = useCallback(async({date_gte, q}) => {
    // 查询数据
    const res = await queryRecordData({date_gte, q})
    // 设置总数
    setTotal(res.length)
  }, [])

  // 重置搜索
  const onReset = useCallback(() => {
    console.log('重置')
    // 重置数据
    setDate_Gte(null)
    setQ(null)
    setPage(1)
    setLimit(5)
    // 发送查询
    query({
      _page: 1,
      _limit: 5,
      date_gte: null,
      q: null,
    })
  }, [])

  // 分页操作
  const pageSelect = useCallback((page, limit) => {
    setLimit(limit)
    setPage(page)
    // 发送数据
    query({
      _page: page,
      _limit: limit,
      date_gte,
      q,
    })
  }, [date_gte, q])

  // 确认删除
  const confirm = useCallback((id) => {
    deleteRecord(id)

    // 重新获取页面
    query({
      _page,
      _limit,
      date_gte,
      q,
    })
  }, [date_gte, q, _page, _limit])

  // 取消删除
  const cancel = useCallback((e) => {
    message.success('已取消，请不要随意删除哦！')
  }, [])

  return (
    <>
      <Form
        form={form}
        name="horizontal_login"
        layout="inline"
        onFinish={onFinish}
        className="searchBox"
        initialValues={{
          selectDate: 1,
        }}
      >
        <Form.Item
          name="selectDate"
        >
          <Select style={{ width: 120 }}>
            <Option value={1}>近一天</Option>
            <Option value={3}>近三天</Option>
            <Option value={30}>近一个月</Option>
            <Option value={365}>近一年</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="keywords"
        >
          <Input
            type="keywords"
            placeholder="输入搜索关键字"
          />
        </Form.Item>
        <Form.Item shouldUpdate>
          {() => (
            <Space>
              <Button
                type="primary"
                htmlType="submit"
              >
                搜索
              </Button>
              <Button
                type="primary"
                onClick={onReset}
              >
                重置
              </Button>
            </Space>
          )}
        </Form.Item>
      </Form>
      <div className='afterBox'></div>
      <Table
        dataSource={recordData}
        columns={columns}
        rowKey={'id'}
        pagination={{
          position: ['topLeft'],
          pageSizeOptions: [1, 3, 5, 10],
          showSizeChanger: true,
          showQuickJumper: true,
          current: _page,
          pageSize: _limit,
          total,
          onChange: pageSelect,
        }}
      />
    </>
  )
}
